<template>
    <div>
        <!-- <div class="booktype">
                <div class="dianzishu" :class="{ yin: dwdh1, xian: typeshow }">
                    <ul class="typenav">
                        <li>全部分类</li>
                    </ul>
                    <div class="typemodule">
                        <h2>题材</h2>
                        <ul class="typeul">
                            <li>
                                <span>漫画杂志</span>
                                <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png" alt="">
                            </li>
                            <li>
                                <span>漫画杂志</span>
                                <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png" alt="">
                            </li>
                            <li>
                                <span>漫画杂志</span>
                                <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%A6%9C%E5%8D%95/1_u1638.png" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="youshengshu" :class="{ yin: !dwdh1, xian: !typeshow }">
                    <div>
111
                    </div>
                </div>
            </div> -->
        <div>
            <ul class="typenav">
                <li :class="{ bgc: alltypeshow }" @click="choose()">全部分类</li>
                <li v-for="(item, index) in typelist" :key="index" :class="{ bgc: item.choose }" @click="tab(index)">
                    {{ item.title }}
                </li>
            </ul>
            <div class="typemodule">
                <div :class="{ tabshow: tabshow }">
                    <h2>题材</h2>
                    <ul class="typeul">
                        <li v-for="(jtem, index) in alltype" :key="index" @click="gopage(jtem.url)">
                            <span>{{ jtem.type }}</span>
                            <img :src="jtem.img" alt="">
                        </li>
                    </ul>
                </div>
                <ul class="rankingul">
                    <li v-for="(item, index) in book" :key="index" @click="gopage(item.url)">
                        <div class="bookinfo">
                            <div class="bookimg">
                                <img :src="item.img" alt="">
                                <div class="icon" v-show="!typeshow">
                                    <img src="https://cdn7.axureshop.com/demo/1182587/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u1119.png" alt="">
                                </div>
                            </div>
                            <p>
                                <span class="bookname">{{ item.name }}</span><br>
                                <span>{{ item.type }}·{{ item.wanjie }}</span>
                            </p>
                        </div>
                        <span>{{ item.number }}</span>
                    </li>
                </ul>

            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'WT45TypeView',
    props: ["alltype", "typelist","typeshow"],
    data() {
        return {
            alltypeshow: true,
            tabshow: false,
            book: []
        };
    },

    mounted() {

    },

    methods: {
        // 切换页面 切换颜色
        tab(index) {
            this.alltypeshow = false;
            for (let i = 0; i < this.typelist.length; i++) {
                this.typelist[i].choose = false;
            }
            this.typelist[index].choose = true;
            this.book = this.typelist[index].books
            // console.log(this.typelist[index].books);
            this.tabshow = true;
        },
        // 切换页面 切换颜色
        choose() {
            this.alltypeshow = true;
            this.tabshow = false;
            for (let i = 0; i < this.typelist.length; i++) {
                this.typelist[i].choose = false;
            }
            this.book = [];
        },
        // 跳转页面
        gopage(url) {
            this.$router.push({
                path: url
            })
        },
    },
};
</script>

<style lang="less" scoped>
.typenav {
    width: 22%;
    float: left;

    li {
        line-height: 4.8rem;
        color: #333333;
        font-size: 1.5rem;
        text-align: center;
    }

    .bgc {
        color: #41c872;
    }
}

.typemodule {
    width: 78%;
    float: left;
    min-height: 59rem;
    border-left: 0.1rem solid rgb(232, 232, 232);
    padding: 1rem;

    >div {
        width: 100%;
        height: 300%;
        transition: all 0.1s linear;
        overflow: hidden;


        h2 {
            line-height: 2.4rem;
        }

        .typeul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;

            li {
                width: 48%;
                color: #2B3133;
                font-size: 1.2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem;
                height: 6rem;
                border-radius: 0.5rem;
                background-color: #f5f7f9;
                margin: 0.5rem 0;

                img {
                    height: 100%;
                }
            }
        }
    }



    .tabshow {
        transform: translateY(-100%);
        height: 0;
        // transition: height 0.1s linear 2s;

    }

    .rankingul {
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem;

            .bookinfo {
                display: flex;
                justify-content: space-between;
                align-items: center;


                .bookimg {
                    width: 5rem;
                    height: 6.8rem;
                    margin-right: 1rem;
                    border-radius: 0.5rem;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    .icon {

                        width: 1.6rem;
                        height: 1.6rem;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        background: url("https://cdn7.axureshop.com/demo/1182587/images/%E4%B8%93%E9%A2%98%E5%90%AC%E4%B9%A6/u2259.png") no-repeat;
                        background-size: 1.6rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img {
                            width: 0.7rem;
                            height: 0.8rem;
                        }

                    }
                }



                p {
                    color: #999999;
                    font-size: 1.2rem;
                    line-height: 3rem;

                    .bookname {
                        font-size: 1.5rem;
                        color: #333;
                    }
                }
            }

            >span {
                color: #FFAC53;
                font-size: 1.6rem;
            }
        }
    }
}
</style>